<mat-card class="panel-enroll">
  <mat-card-title
    style="display:flex; justify-content: space-between;align-items: baseline;"
    >{{ "user.enroll.title" | translate: lang }}
  </mat-card-title>
  <form [formGroup]="validateForm" (ngSubmit)="submitForm()">
    <div class="i uname">
      <mat-form-field>
        <input
          matInput
          formControlName="username"
          id="'username'"
          placeholder="{{
            'user.login.username.placeholder' | translate: lang
          }}"
        />
        <mat-error *ngIf="validateForm.controls.username.hasError('required')">
          {{ "user.enroll.username.error.valid" | translate: lang }}
        </mat-error>
        <mat-error *ngIf="validateForm.controls.username.hasError('no')">
          {{ "user.enroll.username.error.has" | translate: lang }}
        </mat-error>
      </mat-form-field>
    </div>
    <div class="i pwd">
      <mat-form-field>
        <input
          placeholder="{{
            'user.forgot.password.placeholder' | translate: lang
          }}"
          matInput
          type="password"
          id="password"
          formControlName="password"
          (ngModelChange)="updateConfirmValidator()"
        />
        <mat-error
          *ngIf="
            validateForm.get('password').dirty &&
            validateForm.get('password').errors
          "
          >{{
            "user.login.password.error.require" | translate: lang
          }}</mat-error
        >
      </mat-form-field>
    </div>
    <div class="i confirm">
      <mat-form-field>
        <input
          placeholder="{{
            'user.enroll.password.placeholder' | translate: lang
          }}"
          matInput
          type="password"
          formControlName="password2"
          id="password2"
        />
        <mat-error
          *ngIf="
            validateForm.get('password2').dirty &&
            validateForm.get('password2').errors &&
            validateForm.get('password2').hasError('required')
          "
        >
          {{ "user.enroll.password.error.confirm" | translate: lang }}
        </mat-error>
        <mat-error
          *ngIf="
            validateForm.get('password2').dirty &&
            validateForm.get('password2').errors &&
            validateForm.get('password2').hasError('confirm')
          "
        >
          {{ "user.enroll.password.error.eq" | translate: lang }}
        </mat-error>
      </mat-form-field>
    </div>

    <div class="i code">
      <mat-form-field>
        <input
          matInput
          formControlName="code"
          placeholder="{{ 'user.login.code.placeholder' | translate: lang }}"
        />
        <mat-error *ngIf="validateForm.controls.code.hasError('required')">
          {{ "user.login.code.error.require" | translate: lang }}
        </mat-error>
      </mat-form-field>
      <div
        class="sendCode"
        type="button"
        mat-button
        appCode
        [aim]="validateForm.controls.username.value"
        [type]="'enroll'"
      >
        {{ "user.login.btn.send.text" | translate: lang }}
      </div>
    </div>

    <!-- <div class="i code">
      <mat-form-field>
        <input
          matInput
          formControlName="code"
          placeholder="{{ 'user.forgot.invite' | translate: lang }}"
        />
        <mat-error *ngIf="validateForm.controls.code.hasError('required')">
          {{ "user.forgot.invite_require_error" | translate: lang }}
        </mat-error>
      </mat-form-field>
    </div> -->

    <div class="i slidercode">
      <app-slider-code
        *ngIf="!isServer"
        #sliderCodeRef
        (onChangeValidate)="onChangeValidate($event)"
      ></app-slider-code>
    </div>

    <div class="i agree">
      <mat-checkbox formControlName="agree">{{
        "user.login.checkbox.agree" | translate: lang
      }}</mat-checkbox>
    </div>

    <div class="i login">
      <button class="submit" mat-button [disabled]="!validateForm.valid">
        {{ "user.login.btn.enroll.text" | translate: lang }}
      </button>
    </div>
  </form>
</mat-card>
